import { Divider, Tooltip, Button } from 'antd';
import React from 'react';
import IconFont from '@/components/IconFont';
import { Toolbar } from '@/components/GGEditor';
import ToolbarButton from './ToolbarButton';
import styles from './index.less';

const FlowToolbar = props => (
  <Toolbar className={styles.toolbar}>
    <ToolbarButton command="undo" text={'撤销'} />
    <ToolbarButton command="redo" text={'重做'} />
    <Divider type="vertical" />
    <ToolbarButton command="copy" text={'复制'} />
    <ToolbarButton command="paste" text={'粘贴'} />
    <ToolbarButton command="delete" text={'删除'} />
    <Divider type="vertical" />
    <ToolbarButton command="zoomIn" icon="zoom-in" text="放大" />
    <ToolbarButton command="zoomOut" icon="zoom-out" text="缩小" />
    <ToolbarButton command="autoZoom" icon="fit-map" text="适应窗口" />
    <ToolbarButton command="resetZoom" icon="actual-size" text="1:1缩放" />
    <Divider type="vertical" />
    <ToolbarButton command="toBack" icon="to-back" text="层级向下" />
    <ToolbarButton command="toFront" icon="to-front" text="层级向上" />
    <Divider type="vertical" />
    <ToolbarButton command="multiSelect" icon="multi-select" text="多选" />
    <ToolbarButton command="addGroup" icon="group" text="添加组" />
    <ToolbarButton command="unGroup" icon="ungroup" text="取消组" />
    {/* <Divider type="vertical" /> */}
    {/* <MToolbarButton
      onChange={() => {
        const { toggleFull } = props.rest;
        toggleFull();
      }}
      icon={'iconquanping'}
      text="全屏"
    />

    <MToolbarButton onChange={props.handleSave} icon={'iconbaocun1'} text="保存" /> */}
  </Toolbar>
);

const MToolbarButton = props => {
  const { command, icon, text } = props;
  return (
    <Tooltip title={text} placement="bottom" overlayClassName={styles.tooltip}>
      <IconFont onClick={props.onChange} type={icon} />
    </Tooltip>
  );
};
export default FlowToolbar;
